<!-- 用户编辑弹窗 -->
<template>
  <el-dialog width="680px" :visible="visible" :lock-scroll="false" :destroy-on-close="true"
    custom-class="ele-dialog-form" :title="data ?data.shoole_title + '--' + data.title + '设置':''"
    @update:visible="updateVisible">
    <el-alert type="info" show-icon :closable="false"><b style="font-size: 14px">禁用设置10分钟后生效</b></el-alert>
    <el-form ref="forms" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="上午" prop="value1">
        <el-time-picker is-range v-model="form.value1" :picker-options="{
            format: 'HH:mm',
          }" range-separator="至" value-format="HH:mm" start-placeholder="开始时间" end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="下午" prop="value2">
        <el-time-picker is-range v-model="form.value2" :picker-options="{
            format: 'HH:mm',
          }" range-separator="至" value-format="HH:mm" start-placeholder="开始时间" end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="晚上" prop="value3">
        <el-time-picker is-range v-model="form.value3" :picker-options="{
            format: 'HH:mm',
          }" range-separator="至" value-format="HH:mm" start-placeholder="开始时间" end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="开启时间" prop="type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox v-for="(v, i) in [
              '周一',
              '周二',
              '周三',
              '周四',
              '周五',
              '周六',
              '周日',
            ]" :key="i" :label="'' + (i + 1)" :name="'' + (i + 1)">{{ v }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否开启" prop="isopen">
        <el-radio-group v-model="form.isopen">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button type="primary" :loading="loading" @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "UserEdit",
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
    },
    data() {
      return {
        form: {
          value1: ["07:00", "23:00"],
          value2: ["07:00", "23:00"],
          value3: ["07:00", "23:00"],
          type: [],
          isopen: 1
        },
        // 表单验证规则
        rules: {
          value1: [{
            required: true,
            message: "请选择上午时间",
            trigger: ["change", "blur"]
          }, ],
          value2: [{
            required: true,
            message: "请选择下午时间",
            trigger: ["change", "blur"]
          }, ],
          value3: [{
            required: true,
            message: "请选择晚上时间",
            trigger: ["change", "blur"]
          }, ],
          type: [{
            required: true,
            message: "请选择开启时间",
            trigger: ["change", "blur"]
          }, ],
          // isopen: [
          // 	{ required: true, message: "请选择是否开启", trigger: "change" },
          // ],
        },
        // 提交状态
        loading: false,
      };
    },

    watch: {
      data(vel) {
        this.form = {
          value1: ["07:00", "23:00"],
          value2: ["07:00", "23:00"],
          value3: ["07:00", "23:00"],
          type: [],
          isopen: 1
        }
        this.$http
          .get("/schoole_set/info", {
            params: {
              schoole_id: vel.schoole_id,
              mode: vel.mode,
            },
          })
          .then((res) => {
            if (res.data.code === 0) {
              if (res.data.data?.id) {
                this.form = {
                  id: res.data.data?.id,
                  value1: res.data.data.time_range != "" ? JSON.parse(res.data.data.time_range)[0].split("-") : [
                    "07:00", "23:00"
                  ],
                  value2: res.data.data.time_range != "" ? JSON.parse(res.data.data.time_range)[1].split("-") : [
                    "07:00", "23:00"
                  ],
                  value3: res.data.data.time_range != "" ? JSON.parse(res.data.data.time_range)[2].split("-") : [
                    "07:00", "23:00"
                  ],
                  type: res.data.data.open_time != "" ? JSON.parse(res.data.data.open_time) : [],
                  isopen: res.data.data.isopen
                }
              }
              console.log(this.form, 888888)
            }
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
    },
    mounted() {},
    methods: {
      changeInp() {
        this.$forceUpdate();
      },
      /* 保存编辑 */
      save() {
        this.$refs["forms"].validate((valid) => {
          if (valid) {
            this.loading = true;
            // 城市数据处理
            this.form = Object.assign({}, this.form, {
              city: this.city,
            });
            this.$http
              .post("/schoole_set/edit", {
                mode: this.data.mode,
                schoole_id: this.data.schoole_id,
                time_range: JSON.stringify([
                  this.form.value1.join("-"),
                  this.form.value2.join("-"),
                  this.form.value3.join("-"),
                ]),
                id: this.form.id,
                open_time: JSON.stringify(this.form.type),
                isopen: this.form.isopen
              })
              .then((res) => {
                this.loading = false;
                if (res.data.code === 0) {
                  this.$message({
                    type: "success",
                    message: '设置成功,将在10分钟后生效'
                  });
                  this.form = {
                    value1: ["07:00", "23:00"],
                    value2: ["07:00", "23:00"],
                    value3: ["07:00", "23:00"],
                    type: [],
                  };
                  this.updateVisible(false);
                  this.$emit("done");
                } else {
                  this.$message.error(res.data.msg);
                }
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit("update:visible", value);
      },
    },
  };
</script>

<style scoped>
</style>
